<script setup>
import { ref } from 'vue'
import { ArrowRight, Plus, Promotion, Close } from '@element-plus/icons-vue'
import RoleTable from '@/components/home/RoleTable.vue'
// 导入自定义的axios实例
import $ajax from '@/util/ajax/http'
const dialogVisible = ref(false)
const formLabelWidth = '140px'
const form = ref({
  rid: -1,
  rname: '测试角色',
  rinfo: '在此填写角色得到描述信息',
  mktime: new Date(),
  status: 1,
})

async function doSave() {
  const url = '/sys/r/add'
  //   数据结构，获得 由服务器提供的响应`data`属性的值，给json
  const { data: res } = await $ajax.post(url, form.value)
  console.log(res)
}
</script>

<template>
  <div class="mainview">
    <!--  面包屑导航-->
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item :to="{ path: '/' }">公众监督系统</el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="/">系统管理</a>
      </el-breadcrumb-item>
      <el-breadcrumb-item>角色管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 核心的功能区 -->
    <el-card style="max-width: 100%">
      <template #header>
        <div class="card-header">
          <span class="title">角色管理窗口</span>
          <el-button type="primary" :icon="Plus" @click="dialogVisible = true"
            >添加新角色</el-button
          >
        </div>
      </template>
      <!--      角色表格区域-->
      <RoleTable />
      <template #footer>Footer content</template>
    </el-card>
    <!-- 新建与编辑角色对话框窗口 -->
    <el-dialog
      v-model="dialogVisible"
      title="新建与编辑角色"
      width="600"
      :before-close="handleClose"
    >
      <!-- 角色Form数据区域  -->
      <el-form :model="form">
        <el-form-item label="角色流水号" :label-width="formLabelWidth">
          <el-input v-model="form.rid" autocomplete="off" />
        </el-form-item>
        <el-form-item label="角色名称" :label-width="formLabelWidth">
          <el-input v-model="form.rname" autocomplete="off" />
        </el-form-item>
        <el-form-item label="详情" :label-width="formLabelWidth">
          <el-input v-model="form.rinfo" autocomplete="off" />
        </el-form-item>

        <el-form-item label="数据状态" :label-width="formLabelWidth">
          <el-input v-model="form.status" autocomplete="off" />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button :icon="Close" @click="dialogVisible = false">Cancel</el-button>
          <el-button type="primary" :icon="Promotion" @click="doSave"> 保存数据 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="less">
.mainview {
  .el-card {
    margin-top: 20px;
    border-radius: 10px;
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title {
        color: #79bbff;
        font-size: 24px;
        font-weight: bold;
      }
    }
  }
}
</style>
